import React, { Component } from "react";
import { Icon } from "react-vant";
import { deleteCarList, getPay, getCarList } from "../api/index";
import request from "../utils/request";

export default class Car extends Component {
  state = {
    list: [],
    totalPrice: 0,
    allChecked: false,
  };
  componentDidMount() {
    this.getList();
  }
  //获取数据
  getList() {
    getCarList().then((res) => {
      console.log(res);
      this.setState({
        list: res.data.data,
      });
    });
  }
  //删除数据
  delete(id) {
    deleteCarList({ id }).then((res) => {
      console.log(res);
      this.getList();
      // this.setTotalPrice();
      this.props.history.go(0);
    });
  }
  //返回上一级
  goBack() {
    this.props.history.go(-1);
  }
  //去支付
  goPay() {
    // getPay({ params: { AllPrice: this.state.totalPrice } }).then((res) => {
    //   console.log(res);
    //   window.open(res.data);
    // });
    request
      .get("/api/pay", { params: { AllPrice: this.state.totalPrice } })
      .then((res) => {
        console.log(res);
        window.open(res.data);
      });
  }
  render() {
    const { list, totalPrice, allChecked } = this.state;
    return (
      <div className="car">
        <div className="header">
          <Icon
            name="arrow-left"
            size="20"
            onClick={() => {
              this.goBack();
            }}
          />
          <div>购物车</div>
          <span></span>
        </div>
        <div className="content">
          {list.map((item, idx) => {
            return (
              <dl key={idx} className="list">
                <input
                  type="checkbox"
                  checked={item.ischeckBox}
                  onChange={(e) => this.handleChange(e, item.id)}
                />
                <dt>
                  <img src={item.img} alt="" />
                </dt>
                <dd>
                  <div>{item.title}</div>
                  <div>
                    <span>￥{item.price}</span>
                    <span>
                      <button onClick={() => this.dis(item.id)}>-</button>{" "}
                      {item.num}{" "}
                      <button onClick={() => this.add(item.id)}>+</button>{" "}
                      <Icon
                        name="delete-o"
                        size="23"
                        onClick={() => {
                          this.delete(item.id);
                        }}
                      />
                    </span>
                  </div>
                </dd>
              </dl>
            );
          })}
        </div>
        <div className="footer">
          <div className="checkbox">
            <input
              type="checkbox"
              checked={allChecked}
              onChange={(e) => this.allCheckBox(e)}
            />
            &nbsp; 全选 总价：￥{totalPrice}
          </div>
          <button onClick={() => this.goPay()}>提交订单</button>
        </div>
      </div>
    );
  }
  //给数量加1
  add = (id) => {
    let { list } = this.state;
    const arr = list.map((item) => {
      if (item.id === id) {
        item.num += 1;
      }
      return item;
    });
    this.setState(
      {
        list: arr,
      },
      () => {
        // state的值更新完成后触发
        this.setTotalPrice(); // 计算总价格
      }
    );
  };

  // 给数量减1
  dis = (id) => {
    let { list } = this.state;
    const arr = list.map((item) => {
      if (item.id === id && item.num > 0) {
        item.num -= 1;
      }
      return item;
    });
    this.setState(
      {
        list: arr,
      },
      () => {
        // state的值更新完成后触发
        this.setTotalPrice(); // 计算总价格
      }
    );
  };

  // 单选按钮
  handleChange = (e, id) => {
    let { list } = this.state;
    const arr = list.map((item) => {
      if (item.id === id) {
        item.ischeckBox = e.target.checked;
      }
      return item;
    });

    const checke = arr.every((item) => item.ischeckBox);
    this.setState(
      {
        list: arr,
        allChecked: checke,
      },
      () => {
        this.setTotalPrice();
      }
    );
  };

  // 计算总价格
  setTotalPrice = () => {
    let { list } = this.state;
    const allPrice = list.reduce((price, item) => {
      return price + (item.ischeckBox ? item.num * item.price : 0);
    }, 0);

    this.setState({
      totalPrice: allPrice,
    });
  };

  // 全选按钮
  allCheckBox = (e) => {
    let { list } = this.state;

    const arr = list.map((item) => {
      item.ischeckBox = e.target.checked;
      return item;
    });
    this.setState(
      {
        allChecked: e.target.checked,
        list: arr,
      },
      () => {
        this.setTotalPrice();
      }
    );
  };
}
